<template>
	<view class="agentFansContainer">
		<view v-if="fansList.length == 0" class="text-lg text-center text-gray">暂无数据</view>
		<!-- <scroll-view scroll-y="true" class="scrollView" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="scroll"> -->
			<!-- tab栏切换 -->
			<scroll-view scroll-x class="bg-white nav ">
					<view class="cu-item" :class="index == curTab ? 'text-blue cur' : ''" v-for="(item, index) in tabsList" :key="index" @tap="tabChange(index)" :data-id="index">
						<view class="cu-items">
							{{ item.title }}
						</view>
					</view>
			</scroll-view>
			<!-- 全部粉丝 -->
			<view class="cu-list menu">
				<view v-if="curTab==0" class="cu-item" v-for="(item, index) in fansList" :key="index" @click="listItemClick(item)">
					<!-- 全部fans -->
					<view class="content padding-tb-sm">
						<view class="text-lg">
							<text class="cuIcon-people " :class="[item.gender == 1 ? 'text-blue' : 'text-red']"></text>
							{{ item.nickName | nickNameFilter }}
						</view>
						
						<view class="text-gray text-sm">
							<text class="cuIcon-location"></text>
							{{ item.country ? item.country : '' }}{{ item.province ? item.province : '' }}{{ item.city ? item.city : '' }}
							
								<text v-if="item.isCustomer==1" style="margin-left:15rpx;font-weight: 700;">|</text>
								<text v-if="item.isCustomer==1" style="color:#5592ff;margin-left:5rpx;font-size: 30rpx;" >客户</text>
							
						</view>
						
					</view>
					<view class="action" ><text class="cuIcon-roundright" style="font-size: 42rpx;"></text></view>
				</view>
			</view>
			
			<view class="cu-list menu" style="margin-top:0rpx" v-if="curTab==1"> 
					<view  v-if="item.isCustomer==1" class="cu-item" v-for="(item, index) in fansList" :key="index" @click="listItemClick(item)">
						<!-- 客户fans -->
						<view  class="content padding-tb-sm">
							<view class="text-lg">
								<text class="cuIcon-people " :class="[item.gender == 1 ? 'text-blue' : 'text-red']"></text>
								{{ item.nickName | nickNameFilter }}
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-location"></text>
								{{ item.country ? item.country : '' }}{{ item.province ? item.province : '' }}{{ item.city ? item.city : '' }}
							</view>
						</view>
						<view class="action" v-if="item.isCustomer==1"><text class="cuIcon-roundright" style="font-size: 42rpx;"></text></view>
						
					</view>
			</view>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- </scroll-view> -->

		<!-- <uni-pagination :total="total" :pageSize="8" prev-text="上一页" next-text="下一页" @change="pageChange" /> -->
	</view>
</template>

<script>
import { mapActions, mapMutations } from 'vuex';
export default {
	data() {
		return {
			fansList: [],
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			pageIndex: 1,
			total: 0,
			canLoad: true,
			tabsList:[
				{
					title:'全部粉丝',
				},
				{
					title:'客户'
				}
			],
			curTab: 0,
			// isCustomer:'',
		};
	},
	onReady() {
		this.getList(1);
	},
	onReachBottom() {
		this.getList();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		...mapActions({
			// 获取粉丝列表
			getFansList: 'agent/getFansList',
			// 分页查询
			getFansPageList:'agent/getFansPageList',
			// 判断粉丝是否为客户
			getFansIsCustomer:'agent/getFansIsCustomer',
			getFansPageLists:'agent/getFansPageLists',
			
		}),
		...mapMutations({
			setAgentFansCache: 'agent/setAgentFansCache'
		}),
		tabChange(index) {
			this.curTab = index;
			console.log(this.curTab);
			console.log(index);
		},
		// 跳转
		listItemClick(item) {
			console.log(item);
			this.setAgentFansCache(item);
			uni.navigateTo({
				url: `agentFansDetail?id=${item.id}`
			});
		},
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		pageChange(obj) {
			console.log(obj);
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			this.getList(obj.current);
		},
		getList(page) {
			if (!this.canLoad) return;
			uni.showLoading({
				title: '请求中',
				icon: 'none'
			});
			// let agentId = 'oJOuUjtZqgU4wLPEpzUY-xuHebXY';
			this.getFansList({
			// this.getFansPageList({
				teamNo: this.$store.state.user.userInfo.teamNo,
				portEmpNo: this.$store.state.user.userInfo.No,
				limit: 18,
				page: this.pageIndex
			})
				.then(res => {
					uni.hideLoading();
					console.log(res);
					if (res && (res.code == '000000' || res.code == 0)) {
						this.fansList = [...this.fansList,...res.data.list];
						console.log(this.fansList);
						this.total = res.data.totalRow;
						this.pageIndex = this.pageIndex + 1;
						if (res.data.lastPage) {
							this.canLoad = false;
						}
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
				});
		}
	}
};
</script>

<style lang="less">

.agentFansContainer {
	// padding-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
	// padding-bottom: calc(24rpx + 30px);
	overflow: hidden;
	.scrollView {
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - (24rpx + 30px));
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - (24rpx + 30px) - 44px);
		/* #endif */
	}
	 .cu-items{
		 // padding: 0rpx 30rpx;
		margin-left: 20rpx;
		padding-top: 18rpx;
		font-size: 30rpx;
		width:290rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// width:50%;
	 }

}
</style>
